<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>立项信息</title>
    <!-- 引入其它组件 -->
    <!-- 引入 layui -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/app.css">
    <style>
        .layui-form-label {
            width: 64px;
            text-align: left; 
            font-weight: bold;
        }

        .layui-input-block {
            margin-left: 100px;
        }

        .layui-textarea {
            min-height: 64px;
        }

        .layui-card-header {
            text-align: center;
            font-size: normal;
            height: 30px;
            font-weight: bold;
        }

        .required:after {
            content: "*";
            color: red;
        }

        /* 使用table布局 */
        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            margin-bottom: 15px;
            font-size: small;
        }

        .form-table td {
            padding: 0 0px;
            vertical-align: middle;
        }

        .form-table .label-cell {
            width: 60px;
            text-align: right;
            padding-right: 10px;
            white-space: nowrap;
        }

        .form-table .select-cell {
            width: 25%;
            /* 三个选择框平均分配宽度 */
        }

        .form-table .select-cell select {
            width: 100%;
            margin-top: 15px;
        }

        .layui-input {
            margin-left: 0px;
        }

        /* 加载提示样式 */
        .loading-text {
            color: #999;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="layui-container">
        <!-- 基本信息卡片 -->
        <form class="layui-form" lay-filter="projectForm" action="">
            <div class="layui-card">
                <div class="layui-card-body" style="overflow: auto;">
                    <div class="layui-form-item" style="margin-bottom: 0px;">
                        <label class="layui-form-label required">项目名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入项目名称"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 
                    <div class="layui-form-item" style="display:none;">
                        <label class="layui-form-label required">立项编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="approval_code" value="@" placeholder="请输入立项编码" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div> 
                    -->
                    <div class="layui-form-item" style="margin-top: 15px;">
                        <label class="layui-form-label required">项目类型</label>
                        <div class="layui-input-block">
                            <select name="project_type" lay-verify="required" id="projectTypeSelect">
                                <option value="广电线路工程" selected>广电线路工程</option>
                                <option value="广电管道工程">广电管道工程</option>
                                <option value="电源设备工程">电源设备工程</option>
                                <option value="有线设备工程">有线设备工程</option>
                                <option value="无线设备工程">无线设备工程</option>
                            </select>
                        </div>
                    </div>
                    <table class="form-table">
                        <tr>
                            <td class="label-cell">
                                <label class="layui-form-label" style="width: auto;">业务类型</label>
                            </td>
                            <td class="select-cell">
                                <select name="business_type" lay-verify="required" id="businesstypeSelect">
                                    <option value="工程技术" selected>工程技术</option>
                                    <option value="市场业务">市场业务</option>
                                    <option value="政企集客">政企集客</option>
                                    <option value="有线电视配套业务">有线电视配套工程</option>
                                </select>
                            </td>
                            <td class="label-cell">
                                <label class="layui-form-label" style="width: auto;">建设类型</label>
                            </td>
                            <td class="select-cell">
                                <select name="construction_type" lay-verify="required" id="constructionTypeSelect">
                                    <option value="新建干线网" selected>新建干线网</option>
                                    <option value="干线网改造">干线网改造</option>
                                    <option value="无产权工程">无产权工程</option>
                                </select>
                            </td>
                            <td class="label-cell">
                                <label class="layui-form-label" style="width: auto;">项目审核</label>
                            </td>
                            <td class="select-cell">
                                <select name="reviewer" lay-verify="required" id="reviewerSelect">
                                    <option value="">加载中...</option>
                                </select>
                            </td>
                        </tr>
                    </table>

                    <div class="layui-form-item">
                        <label class="layui-form-label">项目总述</label>
                        <div class="layui-input-block">
                            <textarea name="project_overview" placeholder="请输入项目总述" class="layui-textarea" required
                                lay-verify="required"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">技术分析</label>
                        <div class="layui-input-block">
                            <textarea name="technical_analysis" placeholder="请输入技术分析" class="layui-textarea" required
                                lay-verify="required"></textarea>
                        </div>
                    </div>
                   
                    <table class="form-table">
                        <tr>
                            <td class="label-cell">
                                <label class="layui-form-label" style="width: auto;">现有点位</label>
                            </td>
                            <td class="select-cell" text-align="left">
                                <input type="text" lay-affix="number" name="point_old" value="0" lay-precision="0"
                                    autocomplete="off" class="layui-input">
                            </td>
                            <td class="label-cell" text-align="right">
                                <label class="layui-form-label" style="width: auto;">新建点位</label>
                            </td>
                            <td class="select-cell" text-align="left">
                                <input type="text" lay-affix="number" name="point_new" value="0" lay-precision="0"
                                    autocomplete="off" class="layui-input">
                            </td>
                            <td class="label-cell" text-align="right">
                                <label class="layui-form-label" style="width: auto;">单点成本</label>
                            </td>
                            <td class="select-cell" text-align="left">
                                <input type="text" lay-affix="number" name="point_cost" value="0" lay-precision="2"
                                    autocomplete="off" class="layui-input">
                            </td>
                            <td class="label-cell" text-align="right">
                                <label class="layui-form-label" style="width: auto;">回收周期</label>
                            </td>
                            <td class="select-cell" text-align="left">
                                <input type="text" lay-affix="number" name="recycle_cycle" value="0" lay-precision="0"
                                    autocomplete="off" class="layui-input" tips="按月数计算">
                            </td>
                        </tr>
                    </table>
                    <div class="layui-form-item">
                        <label class="layui-form-label">收益说明</label>
                        <div class="layui-input-block">
                            <textarea name="profit_statement" placeholder="请输入收益说明" class="layui-textarea" required
                                lay-verify="required"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 操作按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0; text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="saveBtn" id="btn-save">保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" id="btn-cancel">取消</button>
                </div>
            </div>
        </form>
    </div>

    <script src="/js/config/api.js"></script>
    <script src="/js/http.js"></script>
    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            var reviewer = null;

            $(document).ready(function () {
                loadReviewers();
            });

            form.verify({
                number: [/^[0-9]+$/, '请输入有效的数字']
            });

            function loadReviewers() {
                $('#projectReviewerSelect').html('<option value="" class="loading-text">加载审核人员...</option>');
                form.render('select');

                http.get(API_CONFIG.ENDPOINTS.GET_PROJECT_REVIEWER)
                    .then(function (res) {
                        if (res.code === 0 && res.data && res.data.length > 0) {
                            $('#reviewerSelect').empty();

                            //$('#reviewerSelect').append('<option value="">请选择</option>');

                            res.data.forEach(function (reviewer) {
                                $('#reviewerSelect').append(
                                    $('<option></option>').val(reviewer.user_id).text(reviewer.user_name)
                                );
                            });
                            form.render('select');
                        } else {
                            $('#reviewerSelect').html('<option value="">加载失败，请刷新重试</option>');
                            form.render('select');
                            layer.msg('获取审核人员失败: ' + (res.msg || '无数据'), { icon: 2 });
                        }
                    })
                    .catch(function (err) {
                        $('#reviewerSelect').html('<option value="">加载失败，请刷新重试</option>');
                        form.render('select');

                        var errorMsg = '获取审核人员失败: ';
                        if (err.responseJSON && err.responseJSON.error) {
                            errorMsg += err.responseJSON.error;
                        } else {
                            errorMsg += err.statusText || '网络错误';
                        }
                        layer.msg(errorMsg, { icon: 2 });
                        console.error('获取审核人员错误:', err);
                    });
            }

            form.on('submit(saveBtn)', function (data) {
                if (!data.field.reviewer) {
                    layer.msg('请选择项目审核人员', { icon: 2 });
                    return false;
                }

                data.field.point_old = parseInt(data.field.point_old) || 0;
                data.field.point_new = parseInt(data.field.point_new) || 0;
                data.field.point_cost = parseFloat(data.field.point_cost) || 0;
                data.field.recycle_cycle = parseInt(data.field.recycle_cycle) || 0;

                var user = localStorage.getItem('user');
                user = JSON.parse(user);
                var submitData = {
                    // 包含所有表单数据
                    ...data.field,
                    // 添加额外数据
                    org_code: user.org_code,
                    designer: user.user_id,
                    initiator: user.org_litename,
                    project_state: parseInt(API_CONFIG.PROJECT_STATE.ToBudget),
                };
                var url = API_CONFIG.ENDPOINTS.CREATE_PROJECT;

                http.post(url, submitData)
                    .then(function (res) {
                        if (res.code === 0) {
                            //layer.msg('保存成功', { icon: 1 });

                            var projectData = {
                                design_code: res.data, //res.design_code,
                                approval_code: '',
                                name: data.field.name,
                                description: data.field.project_overview,
                                org_code: data.field.org_code,
                                designer: data.field.designer,
                                initiator: data.field.initiator,
                                project_type: data.field.project_type,
                                reviewer: data.field.reviewer, // 添加审核人员ID
                                point_old: data.field.point_old,
                                point_new: data.field.point_new,
                                point_cost: data.field.point_cost,
                                recycle_cycle: data.field.recycle_cycle,
                                technical_analysis: data.field.technical_analysis,
                                profit_statement: data.field.profit_statement,
                                status: parseInt(1),
                                isEdit: false,
                            };

                            if (parent.handleProjectBase) {
                                parent.handleProjectBase(projectData);
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);

                            } else {
                                console.error('父页面回调函数未定义');
                            }

                        } else {
                            layer.msg(res.msg || '保存失败', { icon: 2 });
                        }
                    })
                    .catch(function (err) {
                        var errorMsg = '请求失败: ';
                        if (err.responseJSON && err.responseJSON.error) {
                            errorMsg += err.responseJSON.error;
                        } else {
                            errorMsg += err.statusText;
                        }
                        layer.msg(errorMsg, { icon: 2 });
                        console.error('Error:', err);
                    });

                return false;
            });

            $('#btn-cancel').click(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });

            form.render();

        });
    </script>
</body>

</html>